<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue animate动画手写</title>
	<script src="js/vue.js"></script>
	<style>
		@keyframes myframes {
			0% {
				transform: scale(1);
				-webkit-transform: scale(1);
			}
			50% {
				transform: scale(1.5);
				-webkit-transform: scale(1.5);
			}
			100% {
				transform: scale(1);
				-webkit-transform: scale(1);
			}
		}
			/*进入,离开*/
			.active{
				transform-origin: left center;
				animation: myframes 2s linear;
				-webkit-animation: myframes 2s linear;
			}
			.leave{
				transform-origin: left center; /*转换元素位置x轴y轴*/
				animation: myframes 2s reverse;
				-webkit-animation: myframes 2s reverse;
			}
		}
	</style>
</head>
<body>
<div id="app">
	<transition
	name="fade"
    enter-active-class="active"
    leave-active-class="leave"
	>
		<div v-show="seen">hello world</div>
	</transition>
<button @click="handleclick">change</button>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
           seen:true
		},
		methods:{
			handleclick:function(){
				this.seen = !this.seen
			}
		}
	})
</script>
</body>
<!--
    自定义进入状态命名: enter-active-class="active"
    自定义离开状态命名: leave-active-class="leave"
-->
</html>